<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-card>超级管理系统</el-card>
      </el-header>
      <el-container>
        <el-aside>
                <el-menu
                default-active="/home/menu1"
                class=""
                :router="true"
                @open="handleOpen"
              >
                <el-menu-item :index="item.path" v-for="(item,index) in menu" :key="index">
                  <el-icon><icon-menu /></el-icon>
                  <span>{{ item.name }}</span>
                </el-menu-item>
              </el-menu>
        </el-aside>
        <el-main>
           <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script setup lang="ts">
  import { reactive,ref } from 'vue';
  const menu:any  = ref(
          [{
            name:"菜单一",
            path:"/home/menu1",
            },
            {
            name:"菜单二",
            path:"/home/menu2",
            },
            {
            name:"菜单三",
            path:"/home/menu3",
            },
            {
            name:"菜单四",
            path:"/home/menu4",
            }]
      )        

  const handleOpen = (key: string, keyPath: string[]) => {
                  console.log(key, keyPath)
          }

</script>

<style scoped lang="scss">
.home {
  // border: 1px solid red;
  width: 100%;
  height: 100vh;
.el-container {
    height: 100%;
}
  .el-header {
    padding: 0px;
  }

  .el-main {
    height: 100%;
  }

  .el-aside {
    // border: 1px solid red;
    width: auto;
    height: 100%;
    .el-menu {
    height: 100%;
    width: 200px;
    } 
  }
}
</style>
